import React, { memo } from 'react'
import { Input,Button, List } from 'antd'
import store from './store'

export default memo(function TodoList(props) {
  const state = store.getState();
  const changeInputValue = (e) =>{
    const action = {
      type:'changeinput',
      value:e.target.value
    }
    store.dispatch(action);
  }
  const clickBtn = () => {
    const action = {
      type:'additem',
    }
    store.dispatch(action);
  }
  componentDidMount(()=>{
    store.subscript(() => {
      store.setState({});
    })
  })
  // store.subscribe(storeChange)
  // const storeChange=()=> {
  //   setState(store)
  // }
  return (
    <div>
      <div style={{margin:"10px"}}>
        <Input 
            placeholder={state.inputValue} 
            style={{width:"250px",marginRight:"10px"}}
            onChange={changeInputValue}
        />
        <Button 
          type='primary' 
          onClick={clickBtn}
        >增加</Button>
      </div>
      <div style={{margin:'10px',width:'200px'}}>
        <List
          bordered
          dataSource={state.list}
          renderItem={item=>(<List.Item>{item}</List.Item>)}
        />
      </div>
    </div>
  )
})
